<template>
	<view class="order_deils" @click="close">
		<!-- #ifdef MP-WEIXIN -->
		<view class="nav_bg" :style="{ paddingTop: statusHeight + 'px', lineHeight: statusHeight * 2 + 'px' }">
			<view class="search_back" slot="left"><uni-icons type="arrowleft" size="22" color="#fff"></uni-icons></view>
			<view class="deiles_sta">
				<view class="deils_titles">
					<view :class="orderDeilsStatus == 2 ? 'title_top_sty' : 'deils_title_top'">
						<uni-icons type="loop" :size="20" color="#FFF"></uni-icons>
						<text v-if="orderDeilsStatus == 3">等待付款</text>
						<text v-else-if="orderDeilsStatus == 12">处方审核中</text>
						<text v-else-if="orderDeilsStatus == 5">等待自提</text>
						<text v-else-if="orderDeilsStatus == 2">等待发货</text>
						<text v-else-if="orderDeilsStatus == 4">等待收货</text>
						<text v-else-if="orderDeilsStatus == 11">交易完成</text>
						<text v-else-if="orderDeilsStatus == 10">交易取消</text>
						<text v-else-if="orderDeilsStatus == 13">审核中</text>
						<text v-else-if="orderDeilsStatus == 14">已开票</text>
					</view>
					<view class="deils_time">
						<text v-if="orderDeilsStatus == 3">剩{{ hour }}小时{{ minute }}分自动关闭</text>
						<text v-else-if="orderDeilsStatus == 12">药店正在仔细审核您的处方，请耐心等待</text>
						<text v-else-if="orderDeilsStatus == 5">您需要在7天内到店自提</text>
						<text v-else-if="orderDeilsStatus == 2"></text>
						<text v-else-if="[13,14].includes(orderDeilsStatus)">申请发票金额：￥45.8</text>
					</view>
				</view>
				<view class="deiles_address public_sty" v-if="[2, 3, 12].includes(orderDeilsStatus)">
					<view class=""><uni-icons type="location-filled" :size="24"></uni-icons></view>
					<view class="address_box">
						<view class="address_top">
							<view class="user_name">
								<text>张三</text>
								<text>176****3805</text>
							</view>
							<view class="modify" @click="modify" v-if="[3, 12].includes(orderDeilsStatus)"><text>修改</text></view>
						</view>
						<view class="text_sml"><text>上海市浦东新区陆家嘴街道金砖大厦17楼</text></view>
					</view>
				</view>
				<view class="be_receive public_sty" v-else-if="[4, 10, 11].includes(orderDeilsStatus)">
					<view class="be_express">
						<view class=""><uni-icons type="location-filled" :size="24"></uni-icons></view>
						<view class="express_deils">
							<view class="" v-if="orderDeilsStatus == 4">
								<view class=""><text>您的订单已交付邮政快递包裹，运单号为</text></view>
								<view class="express_text"><text>8598545456665555545</text></view>
							</view>
							<view class="" v-if="orderDeilsStatus == 11">
								<view class="express_text"><text>您的订单已由本人签收，如有疑问情可以联系配送员 【李四，...】</text></view>
							</view>
							<view class="" v-if="orderDeilsStatus == 10">
								<view class=""><text>您的订单已取消</text></view>
							</view>
							<view class="text_sml">
								<text>2021-10-06</text>
								<text>13:21:45</text>
							</view>
						</view>
						<view class=""><uni-icons type="arrowright" color="#999999" :size="11"></uni-icons></view>
					</view>
					<view class="be_receive_address">
						<view class=""><uni-icons type="location-filled" :size="24"></uni-icons></view>
						<view class="address_box">
							<view class="address_top">
								<view class="user_name">
									<text>张三</text>
									<text>176****3805</text>
								</view>
							</view>
							<view class="text_sml"><text>上海市浦东新区陆家嘴街道金砖大厦17楼</text></view>
						</view>
					</view>
				</view>
				<view class="invoice_examine public_sty" v-else-if="[13,14].includes(orderDeilsStatus)">
					<view class="invoice_title"><text>增值税电子普通发票</text></view>
					<view class="step"><uni-steps :options="step" active-color="#00B359" :active="orderDeilsStatus==13?'0':'2'"></uni-steps></view>
					<view class="invoice_deils">
						<view class="inv_sty">
							<view class="inv_type text_sml"><text>发票类型</text></view>
							<view class="text_letter_sty"><text>电子普通发票</text></view>
						</view>
						<view class="inv_sty">
							<view class="inv_type text_sml"><text>抬头类型</text></view>
							<view class="text_letter_sty"><text>个人</text></view>
						</view>
						<view class="inv_sty">
							<view class="inv_type text_sml"><text>抬头名称</text></view>
							<view class="text_letter_sty"><text>个人</text></view>
						</view>
						<view class="inv_sty">
							<view class="inv_type text_sml"><text>开票金额</text></view>
							<view class="text_letter_sty"><text>45.8</text></view>
						</view>
						<view class="inv_sty">
							<view class="inv_type text_sml"><text>申请时间</text></view>
							<view class="text_letter_sty"><text>电子普通发票</text></view>
						</view>
						<view class="inv_sty">
							<view class="inv_type text_sml"><text>发票类型</text></view>
							<view class="text_letter_sty"><text>2021-09-09 12:32:43</text></view>
						</view>
					</view>
				</view>
				<view class="self_mention public_sty" v-else>
					<view class="self_title">
						<text class="self_text_sty">商家地址</text>
						<view class="" style="color: #666666; font-size: 22rpx;">
							<text>营业时间：</text>
							<text>8:30-22:30</text>
						</view>
					</view>
					<view class="self_shop_address">
						<view class=""><text>上海市浦东新区陆家嘴西路168号12幢B1-18B-2号</text></view>
						<uni-icons type="chatboxes"></uni-icons>
					</view>
					<view class="self_deils">
						<view class="">
							<view class="self_deils_text self_text_sty"><text>商家电话</text></view>
							<text>021-8344956</text>
						</view>
						<view class="pick_code">
							<view class="self_deils_text self_text_sty"><text>提货码</text></view>
							<text>1876 9809 898</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- #endif -->
		<view class="order_deils_con">
			<!-- 占位盒子 -->
			<view class="" style="height: 255rpx;" v-if="orderDeilsStatus == 5"></view>
			<view class="" style="height: 160rpx;" v-else-if="[4, 11].includes(orderDeilsStatus)"></view>
			<view class="" style="height: 80rpx;" v-else-if="orderDeilsStatus == 10"></view>
			<view class="" style="height: 520rpx;" v-else-if="[13,14].includes(orderDeilsStatus)"></view>
			<view class="seize_box box_sty" v-else></view>

			<view class="deils_shop box_sty public_sty" v-if="[2, 3, 4, 5, 10, 11, 12].includes(orderDeilsStatus)">
				<view class="">
					<view class="shop_title">
						<image class="shop_title_img" src="/static/uni.png" mode=""></image>
						<view class="">
							<text style="margin: 0px 20rpx;">华氏大药房</text>
							<uni-icons type="arrowright"></uni-icons>
						</view>
					</view>
				</view>
				<view class="shops_box">
					<view class="shops_left">
						<view class="shops_img_box"><image class="shops_img" src="/static/uni.png" mode=""></image></view>
					</view>
					<view class="">
						<view class="shops_num  text_letter_sty">
							<view class="titles_letter"><text>健力多氨糖软骨素钙片中你好</text></view>
							<view class="" style="margin-left: 20rpx;"><text>￥22.9</text></view>
						</view>
						<view class="shops_num text_sml">
							<text>药品规格</text>
							<text>x1</text>
						</view>
					</view>
				</view>
				<view class="shop_amount">
					<view class="shop_money shop_sty">
						<text>商品金额</text>
						<view class="text_sml ">
							<text>￥</text>
							<text>22.9</text>
						</view>
					</view>
					<view class="shop_freight shop_sty">
						<text>运费</text>
						<view class="text_sml ">
							<text>￥</text>
							<text>0</text>
						</view>
					</view>
					<view class="shop_coupon shop_sty">
						<text>优惠券</text>
						<view class="text_error">
							<text>-￥</text>
							<text>2</text>
						</view>
					</view>
					<view class="shop_ pay shop_sty">
						<view class=""></view>
						<view class="">
							<text>实付款</text>
							<text class="text_error">￥92.8</text>
						</view>
					</view>
				</view>
			</view>

			<view class="deils_shop box_sty public_sty" v-if="[13, 14].includes(orderDeilsStatus)">
				<view class="">
					<view class="shop_title">
						<image class="shop_title_img" src="/static/uni.png" mode=""></image>
						<view class="">
							<text style="margin: 0px 20rpx;">华氏大药房</text>
							<uni-icons type="arrowright"></uni-icons>
						</view>
					</view>
				</view>
				<view class="shops_box" v-for="(item, index) in invoShop">
					<view class="shops_left">
						<view class="shops_img_box"><image class="shops_img" src="/static/uni.png" mode=""></image></view>
					</view>
					<view class="">
						<view class="shops_num  text_letter_sty">
							<view class="titles_letter">
								<text>{{ item.shopname }}</text>
							</view>
							<view class="" style="margin-left: 20rpx;">
								<text>￥{{ item.shopic }}</text>
							</view>
						</view>
						<view class="shops_num text_sml">
							<text>药品规格</text>
							<text>x{{ item.shopnum }}</text>
						</view>
					</view>
				</view>
				<view class="deils_shop_order">
					<view class="invoice_deils">
						<view class="inv_sty">
							<view class="inv_type text_sml"><text>订单状态</text></view>
							<view class="text_letter_sty"><text>已完成</text></view>
						</view>
						<view class="inv_sty">
							<view class="inv_type text_sml"><text>订单编号</text></view>
							<view class="text_letter_sty"><text>4586562562245</text></view>
						</view>
						<view class="inv_sty">
							<view class="inv_type text_sml"><text>下单时间</text></view>
							<view class="text_letter_sty"><text>2021-10-10 12:23:56</text></view>
						</view>
					</view>
				</view>
			</view>

			<view class="order_infor public_sty" v-if="[2, 3, 4, 5, 10, 11, 12].includes(orderDeilsStatus)">
				<view class="order_infor_title"><text style="font-weight: 500;">订单信息</text></view>
				<view class="order_infor_deils">
					<text class="text_sml">订单编号：</text>
					<view class="infor_sty"><text>12856533545255</text></view>
				</view>
				<view class="order_infor_deils">
					<text class="text_sml">下单时间：</text>
					<view class="infor_sty"><text>2021-10-08 11:45:21</text></view>
				</view>
				<view class="order_infor_deils">
					<text class="text_sml">支付方式：</text>
					<view class="infor_sty"><text>在线支付</text></view>
				</view>
				<view class="order_infor_deils">
					<text class="text_sml">配送方式：</text>
					<view class="infor_sty" v-if="[5, 3].includes(orderDeilsStatus)"><text>自提</text></view>
					<view class="infor_sty" v-else><text>普通快递</text></view>
				</view>
				<view class="contact_service">
					<uni-icons type="chat"></uni-icons>
					<text style="font-size: 28rpx; color: #666666; margin-left: 20rpx;">联系客服</text>
				</view>
			</view>
		</view>

		<view class="content_oper public_sty" v-if="orderDeilsStatus == 3">
			<view class="oper_til" @click.stop="more"><text>更多</text></view>
			<view class="oper_drop public_sty" v-if="dropSta">
				<ul>
					<li>在线咨询</li>
					<li class="li_sty">修改地址</li>
					<li>取消订单</li>
				</ul>
			</view>
			<view class="oper_box">
				<view class="oper_btn"><text>帮我付</text></view>
				<view class="oper_btn oper_col"><text>去付款</text></view>
			</view>
		</view>
		<view class="content_oper public_sty" v-else-if="orderDeilsStatus == 12">
			<view class=""></view>
			<view class="oper_btn"><text>取消订单</text></view>
		</view>
		<view class="content_oper public_sty" v-else-if="orderDeilsStatus == 5">
			<view class=""></view>
			<view class="oper_box">
				<view class="oper_btn"><text>取消订单</text></view>
				<view class="oper_btn oper_col"><text>自提码</text></view>
			</view>
		</view>
		<view class="content_oper public_sty" v-else-if="orderDeilsStatus == 2">
			<view class=""></view>
			<view class="oper_box">
				<view class="oper_btn"><text>取消订单</text></view>
				<view class="oper_btn oper_col"><text>提醒发货</text></view>
			</view>
		</view>
		<view class="content_oper public_sty" v-else-if="orderDeilsStatus == 4">
			<view class="" style="width: 20%;"></view>
			<view class="oper_btn_sty"><text>查看发票</text></view>
			<view class="oper_btn_sty"><text>再次购买</text></view>
			<view class="oper_btn_sty oper_col"><text>确认收货</text></view>
		</view>
		<view class="content_oper public_sty" v-if="orderDeilsStatus == 11">
			<view class="oper_til" @click.stop="more"><text>更多</text></view>
			<view class="oper_drop public_sty" v-if="dropSta">
				<ul>
					<li>投诉店铺</li>
				</ul>
			</view>
			<view class="oper_box">
				<view class="oper_btn_sty"><text>查看发票</text></view>
				<view class="box_btn_sty" v-if="orderevaluate == false">
					<view class="oper_btn_sty"><text>再次购买</text></view>
					<view class="oper_btn_sty oper_col"><text>评价</text></view>
				</view>
				<view class="box_btn_sty" v-else>
					<view class="oper_btn_sty"><text>我的评价</text></view>
					<view class="oper_btn_sty oper_col"><text>再次购买</text></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusHeight: null,
			hour: 23,
			minute: 59,
			dropSta: false,
			orderDeilsStatus: 14,
			orderevaluate: false,
			step: [
				{
					title: '提交订单'
				},
				{
					title: '订单完成'
				},
				{
					title: '开票完成'
				}
			],
			invoShop: [
				{
					shopname: '健力多氨糖软骨素钙片中你好',
					shopic: 22.9,
					shopnum: 2
				},
				{
					shopname: '健力多氨糖软骨素钙片中你好',
					shopic: 22.9,
					shopnum: 2
				}
			]
		};
	},
	onLoad() {
		this.getStatusHeight();
	},
	methods: {
		getStatusHeight() {
			let that = this;
			uni.getSystemInfo({
				success(res) {
					that.statusHeight = res.statusBarHeight;
				}
			});
		},
		modify() {},
		more() {
			this.dropSta = !this.dropSta;
		},
		close() {
			this.dropSta = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.deils_titles {
	line-height: 40rpx !important;
	color: #ffffff !important;
	text-align: center;
	.deils_title_top {
		font-size: 40rpx;
		margin-bottom: 30rpx;
		text {
			margin-left: 16rpx;
		}
	}
	.title_top_sty {
		font-size: 40rpx;
		margin: 44rpx 0rpx;
		text {
			margin-left: 16rpx;
		}
	}
	.deils_time {
		font-size: 28rpx;
	}
}
.deiles_address {
	margin-top: 24rpx;
	height: 146rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0rpx 30rpx;
	line-height: 40rpx;

	.modify {
		color: #00b359;
		font-size: 28rpx;
	}
}

.address_box {
	width: 89%;
}
.address_top {
	display: flex;
	justify-content: space-between;
	margin-bottom: 8rpx;
}
.self_mention {
	padding: 30rpx 30rpx 30rpx 30rpx;
	line-height: 40rpx;
	margin-top: 24rpx;
	.self_title {
		display: flex;
		justify-content: space-between;
	}
	.self_shop_address {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 12rpx;
	}
	.self_deils {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 0rpx;
		border-top: 1rpx solid #f5f5f5;
		margin-top: 24rpx;
		.pick_code {
			width: 45%;
			border-left: 1rpx solid #f5f5f5;
			padding-left: 40rpx;
		}
		.self_deils_text {
			margin-bottom: 10rpx;
		}
	}
}
.self_text_sty {
	color: #666666;
	font-size: 28rpx;
}
.order_deils_con {
	padding: 0rpx 30rpx;
}
.seize_box {
	height: 40rpx;
}
.deils_shop {
	padding: 30rpx;
	margin-top: 24rpx;
	.shops_box {
		margin-top: 26rpx;
	}
}

.shop_sty {
	display: flex;
	justify-content: space-between;
	margin-top: 20rpx;
	font-size: 28rpx;
	color: #333333 !important;
}
.order_infor {
	padding: 30rpx;
	.order_infor_deils {
		display: flex;
		margin-top: 20rpx;
		.infor_sty {
			margin-left: 40rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}
	.contact_service {
		margin-top: 48rpx;
		text-align: center;
	}
}
.box_btn_sty {
	display: flex;
}
.oper_drop {
	width: 220rpx;
	position: absolute;
	bottom: 95%;
	left: 3%;
	ul {
		li {
			padding: 36rpx 0rpx;
			font-size: 28rpx;
			margin: 0px 54rpx;
		}
	}
	.li_sty {
		border-top: 1rpx solid #e5e5e5;
		border-bottom: 1rpx solid #e5e5e5;
	}
}
.content_oper {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24rpx;
	position: relative;
	padding: 30rpx;
	.oper_box {
		display: flex;
	}
}
// 发票审核
.invoice_examine {
	padding: 50rpx 30rpx 30rpx 30rpx;
	line-height: 40rpx;
	margin-top: 20rpx;
	.invoice_title {
		text-align: center;
		margin-bottom: 44rpx;
	}
	.step {
		/deep/ .uni-steps__row-text-container {
			position: relative;
			top: 40rpx;
		}
		/deep/ .uni-steps__row-container {
			position: relative;
			top: -50rpx;
		}
	}
}
.invoice_deils {
	margin-top: 50rpx;
	.inv_sty {
		display: flex;
		margin-top: 20rpx;
		.inv_type {
			margin-right: 30rpx;
		}
	}
}
.deils_shop_order {
}
// 待收货
.be_receive {
	padding: 30rpx;
	margin-top: 24rpx;
}
.be_receive_address {
	margin-top: 40rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 40rpx;
}
.be_express {
	display: flex;
	justify-content: space-between;
	align-items: center;
	line-height: 40rpx;
	.express_deils {
		font-size: 28rpx;
		width: 82%;
		.express_text {
			margin: 8rpx 0rpx;
		}
	}
}
</style>
